.tree-node {
  --color-black-400: rgba(183, 188, 199, 1);
  --color-black-700: rgba(92, 102, 122, 1);
  --lineStyle: 1px solid var(--color-black-400);
  --gradient-primary-full: linear-gradient(225deg, #FA7D64 0%, #F65959 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all .32s ease-in;
  overflow: hidden;

  .line-box {
    height: 24px;
    width: 100%;
    position: relative;

    .line-connect {
      position: absolute;
      top: 0;
      height: 1px;
      width: 100%;
      background: var(--color-black-400);
    }

    .line-to-node {
      height: 100%;
      width: 50%;
      border-top: var(--lineStyle);
      position: absolute;
      top: 0;

      &.left {
        right: 0;
        border-left: var(--lineStyle);
        border-radius: 10px 0 0 0;
      }

      &.right {
        left: 0;
        border-right: var(--lineStyle);
        border-radius: 0 10px 0 0;
      }

      &.center {
        right: 0;
        border-top: none;
        border-left: var(--lineStyle);
      }
    }
  }

  .content {
    width: 120px;
    height: 40px;
    // font-size: 14px;
    // cursor: pointer;
    // user-select: none;
    color: var(--color-black-700);
    // background: #FFFFFF;
    // box-shadow: 0px 0px 24px 0px rgba(70, 98, 139, 0.1);
    // border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 16px;
    transition: all .12s ease-in;

    &:hover {
      color: black;
    }
  }

  .bottom-line-box {
    height: 30px;
    width: 1px;
    position: relative;
    transition: all .32s ease-in;

    &.isExpand {
      background: var(--color-black-400);
    }

    // 展开关闭按钮
    .control-btn {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: var(--lineStyle);
      background: white;
      position: absolute;
      top: 4px;
      left: 50%;
      transform: translateX(-50%);
      user-select: none;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;

      >div {
        font-size: 12px;
        transform: scale(0.7, 0.7);
      }

      &.close {
        background: var(--color-black-400);
        color: white;
      }
    }
  }

  .children {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    transition: all .32s ease-in;

    &.close {
      width: 0;
      height: 0;
      opacity: 0;
    }
  }
}